<template>
  <div class="map" id="map"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import * as Cesium from 'cesium'
let earth = null
onMounted(() => {
  // 创建地球
  earth = new Cesium.Viewer('map', {
    selectionIndicator: false,
    geocoder: false,
    baseLayerPicker: false,
    infoBox: false,
    homeButton: false,
    animation: false,
    timeline: false,
    shouldAnimate: true,
    sceneModePicker: false,
    scene3DOnly: true,
    fullscreenButton: false,
    navigationHelpButton: false
  })
  earth._cesiumWidget._creditContainer.style.display = 'none'
  // 叠加影像服务
  var imgMap = new Cesium.UrlTemplateImageryProvider({
    url: 'https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=ff37f45b78321a410b4771c3fd14d66d',
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 18
  })
  earth.imageryLayers.addImageryProvider(imgMap)

  // 叠加国界服务
  var iboMap = new Cesium.UrlTemplateImageryProvider({
    url: 'https://t{s}.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=ff37f45b78321a410b4771c3fd14d66d',
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 10
  })
  earth.imageryLayers.addImageryProvider(iboMap)
  earth.scene.globe.depthTestAgainstTerrain = true

  const primitive1 = earth.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.PolylineGeometry({
          positions: Cesium.Cartesian3.fromDegreesArray([-100.0, 30.0, -90.0, 30.0]),
          width: 5.0
        }),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        }
      }),
      appearance: new Cesium.PolylineMaterialAppearance({
        material: new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.BLUE,
          dashLength: 16.0,
          gapColor: Cesium.Color.TRANSPARENT,
          dashPattern: 128.0 // 128 means dashed line
        })
      })
    })
  )

  // 创建第二个线段，部分与第一个线段重合
  const primitive2 = earth.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.PolylineGeometry({
          positions: Cesium.Cartesian3.fromDegreesArray([-100.0, 30.0, -105.0, 30.0]),
          width: 5.0
        }),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)
        }
      }),
      appearance: new Cesium.PolylineMaterialAppearance({
        material: new Cesium.Material({
          fabric: {
            type: 'Color',
            uniforms: {
              color: Cesium.Color.BLUE
            }
          },
          colorBlendMode: Cesium.ColorBlendMode.REPLACE
        })
      })
    })
  )
})
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: calc(100% - 50px);
}
</style>